<template>
	<view class="b_width">
		<u-navbar leftIconColor="black" :autoBack="true" title="个人信息" titleStyle="color:black" :placeholder="true"
			bgColor="transparent">
		</u-navbar>
		<view class="info_box">
			<view class="upload_box">
				<u-upload @afterRead="afterRead" :previewImage='false' :previewFullImage="true">
					<view>
						<image :src="user.avatar" class='head_img' ></image>
						<view class="p_box b_flex_cc">
							<image class="phone" mode="widthFix" src="@/static/img/my/phone.png"></image>
						</view>
					</view>

				</u-upload>
			</view>
			<view class="input_box b_flex_c_s border_bottom">
				<view class="name">绑定手机</view>
				<view class="val">{{user.phone}}</view>
			</view>
			<view class="input_box b_flex_c_s">
				<view class="name">用户名</view>
				<input class="val" @blur="setNickname" placeholder-style="color:#9296AF" placeholder="请输入用户名"
					v-model="user.nickname">
			</view>
			<view class="b_submit_box" @click="logout()">退出登录</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo,
		uploadFile,
		userEdit,
		userLogout
	} from "@/require/api.js";
	export default {
		data() {
			return {
				user: {}
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			logout() {
				let _ = this;
				uni.showModal({
					title: '确定要退出登录吗?',
					success(res) {
						if (res.confirm) {

							userLogout().then(ress => {
								uni.removeStorageSync('qlbToken');
								_.$project.toBack();
							});


						}
					}
				})


			},
			async setNickname() {
				let {
					data,
					message
				} = await userEdit({
					avatar: this.user.avatar,
					nickname: this.user.nickname
				});
				this.$project.toast(message);
				this.getUserInfo();
			},
			async getUserInfo() {
				let {
					data
				} = await userInfo();
				this.user = data;
				this.user.phone = this.$project.getMobileSlice(data.phone);
			},
			async afterRead(event) {
				const data = JSON.parse(await uploadFile(event.file.url, {
					model: 'wechat',
					pid: '8'
				}));
				let {
					message
				} = await userEdit({
					avatar: data.data.url,
					nickname: this.user.nickname
				});
				await this.getUserInfo();
				this.$project.toast(message);
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info_box {
		box-sizing: border-box;
		padding: 60rpx 20rpx
	}

	.upload_box {
		width: 180rpx;
		margin: 0 auto;
	}

	.head_img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}

	.p_box {
		width: 50rpx;
		height: 50rpx;
		background-color: #fff;
		border-radius: 50%;
		margin-left: auto;
		position: relative;
		top: -65rpx;

	}

	.phone {
		width: 30rpx;
	}

	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;
	}

	.border_bottom {
		border-bottom: 1rpx solid #F5F5F5;
	}

	.name {
		color: #252B50;
	}

	.val {
		color: #9296AF;
		font-size: 28rpx;
		text-align: right;
	}
</style>